    {extend name="base2" /}

    {block name="body"}
    <div style="margin-top:5px;">
        <img src="/static/images/banner.jpg" alt="">
    </div>
    <div class="contain">
        {foreach name="imgcategory_level_list" item="vo"}
            {if condition="$vo.pid eq 0"}
            <h2>{$vo.name}</h2>
            <hr />
            
            <div id="masonry" class="container-fluid masonry">
                {foreach name="erjicategory_level_list" item="vm"}
                    {if condition="$vm.pid eq $vo.id"}
                    <div class="box">
                        <a href="{:url('img_list/img_detail',['id'=>$vm['id']])}">
                            <img src="{$vm.thumb}" alt="">
                            <h3 class="on">{$vm.name}</h3>
                        </a>
                    </div>
                    {/if}
                {/foreach}
            </div>
            {/if}
        {/foreach}

    </div><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1261688529'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1261688529' type='text/javascript'%3E%3C/script%3E"));</script>
    {/block}

    {block name="script"}
    <script>
        $(function() {
            var $container = $('.masonry');
            $container.imagesLoaded(function() {
                $container.masonry({
                        itemSelector: '.box',
                        gutter: 17,
                        isAnimated: true,
                        isFitWidth: true,
                    });
            });
        });
    </script>
    {/block}